<template>
  <t-popup placement="bottom" trigger="click">
    <t-button variant="text">
      <template #icon><t-icon name="mail" /></template>
      查看我的消息
    </t-button>
    <template #content>
      <t-list style="width: 260px">
        <t-list-item>
          <t-list-item-meta title="列表主内容" description="列表内容列表内容" />
        </t-list-item>
        <t-list-item>
          <t-list-item-meta title="列表主内容" description="列表内容列表内容" />
        </t-list-item>
        <t-list-item>
          <t-list-item-meta title="列表主内容" description="列表内容列表内容" />
        </t-list-item>
        <template #footer>
          <t-button theme="primary" block @click="handleFooterClick" variant="text" size="larger">全部消息</t-button>
        </template>
      </t-list>
    </template>
  </t-popup>
</template>

<script setup lang="tsx">
const emits = defineEmits(["footerClick"]);

const handleFooterClick = () => {
  emits("footerClick");
};
</script>
